<template>
  <div id="myChart"></div>
</template>

<script>
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart, LineChart} from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {

  ToolboxComponent,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  DatasetComponentOption,
  TransformComponent
} from 'echarts/components';
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
  LineChart,
  ToolboxComponent,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);


export default {
  name: 'hello',
  data() {
    return {
      msg: 'Welcome to MiDataSystem',
      prodCategory: ["小米手机", "小米电视", "电动牙刷", "牙膏", "洗衣机", "台灯", "空调", "电冰箱", "其他"],
      prodCount: [88, 92, 63, 77, 93, 80, 72, 86, 34],
      prodCount2: [88, 92, 63, 29, 93, 80, 103, 98, 55]

    }
  },
  mounted() {
    //画线
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('myChart'), 'walden', {
        width: 600,
        height: 400
      })
      // 绘制图表
      myChart.setOption({
        title: {
          text: '小米产品销量图',
          link: 'https://www.baidu.com',
          textStyle: {
            color: 'skyblue',
          }
        },
        tooltip: {
          trigger:'item',
          // triggerOn: 'click',
          formatter: '{b}销量:{c}'
        },
        toolbox: {
          feature: {
            saveAsImage: {}, //保存图片
            dataView: {}, //数据视图
            restore:{}, //重置
            dataZoom: {}, //数据缩放
            magicType: {
              type: ['bar', 'line']
            }
          }
        },
        xAxis: {
          type: 'category', //类目轴
          data: this.prodCategory
        },
        yAxis: {
          type: 'value' //数值轴
        },
        series: [{ //配置给y轴的数据
          name: '销量',
          type: 'bar',
          stack: 'x',
          markPoint:{
            data:[
              {
                type: 'max',
                name: '最大值'
              }
            ]
          },
          markLine: {
            type: 'average',
            name: '平均值'
          },
          data: this.prodCount

        },
          {
            name: '价格',
            type: 'bar',
            data: this.prodCount2
          },
          {
            type: 'bar',
            color: 'red',
            stack: 'x',
            borderColor: 'skyblue',
            borderWidth: 10,
            barBorderRadius: 50,
            data: this.prodCount
          }
        ]
      });
    }
  }
}
</script>


